<template>
  <div class="change-menu" v-loading="loading">

    <ul class="change-list">
      <li>
        <label>档案门类</label>
        <div>
          <span @click="handleChange('idCategoryChange', 'idCategory', item.idCategory)"
                v-for="(item, index) in idCategoryData"
                :key="index"
                :class="{'active': idCategoryChange.includes(item.idCategory)}">
            {{item.name}}
          </span>
        </div>
      </li>
      <li>
        <label>统计分组</label>
        <div>

          <span @click="handleChange('tjfzChange', 'tjfz', item)"
                v-for="(item, index) in tjfzData"
                :key="index"
                :class="{'active': tjfzChange.includes(item.dictValue)}">
            {{item.dictLabel}}
          </span>
        </div>
      </li>
      <li>
        <label>统计结果</label>
        <div>
          <span @click="handleChange('tjjgChange', 'tjjg', item)"
                v-for="(item, index) in tjjgData"
                :key="index"
                :class="{'active': tjjgChange.includes(item.dictValue)}">
            {{item.dictLabel}}
          </span>
        </div>
      </li>
    </ul>

  </div>
</template>

<script>
import { getSelfCategoryTree } from '../../../../../api/category/category'
import { getSysDicId } from '../../../../../api/dictionary/dictionary'

export default {
  name: 'listChangeMenu',
  data () {
    return {
      loading: true,
      idCategoryChange: [],
      tjfzChange: [],
      tjjgChange: [],
      tjfz: [],
      tjjg: [],
      idCategoryData: [],
      tjfzData: [],
      tjjgData: []
    }
  },
  mounted () {
    this.getCondition()
  },
  methods: {
    async getCondition () {
      this.loading = true
      await getSelfCategoryTree('sysModel', this.$route.query.isNotAjJnNode).then(res => {
        this.idCategoryData = []
        const setTreeData = (data) => {
          data.map(item => {
            if (item.idCategory) {
              this.idCategoryData.push(item)
            }
            if (item.children) {
              setTreeData(item.children)
            }
          })
        }
        setTreeData(res.data.data)
      })
      // 统计分组
      await getSysDicId('tjfz').then(res => {
        this.tjfzData = res.data.data
      })
      // 统计结果
      await getSysDicId('tjjg').then(res => {
        this.tjjgData = JSON.parse(JSON.stringify(res.data.data))
        this.tjjg = JSON.parse(JSON.stringify(res.data.data))
        this.tjjgChange = []
        res.data.data.map(item => {
          this.tjjgChange.push(item.dictValue)
        })
      })
      this.loading = false
    },
    handleChange (list, type, item) {
      // 选择条件
      if (type === 'idCategory') {
        if (this[list].includes(item)) {
          this[list].splice(this[list].indexOf(item), 1)
        } else {
          this[list].push(item)
        }
      } else {
        if (this[list].includes(item.dictValue)) {
          this[list].splice(this[list].indexOf(item.dictValue), 1)
          let _index = ''
          this[type].map((aaa, index) => {
            if (aaa.dictValue === item.dictValue) {
              _index = index
            }
          })
          this[type].splice(_index, 1)
        } else {
          this[list].push(item.dictValue)
          this[type].push(item)
        }
      }
    },
    handleRmove (item) {
      this.changedList.splice(this.changedList.indexOf(item), 1)
    },
    reset () {
      this.idCategoryChange = []
      this.tjfzChange = []
      this.tjjgChange = []
      this.tjjgData.map(item => {
        this.tjjgChange.push(item.dictValue)
      })
    },
    getListData () {
      const obj = {
        idCategoryChange: this.idCategoryChange,
        tjfzChange: this.tjfzChange,
        tjjgChange: this.tjjgChange,
        tjfz: this.tjfz,
        tjjg: this.tjjg
      }
      return obj
    }
  }
}
</script>

<style lang="scss" scoped>
  .change-menu {
    padding: 15px;

    .changed {
      line-height: 30px;
      margin-bottom: 10px;

      span {
        margin-right: 10px;
      }
    }

    .change-list {
      li {
        display: flex;
        justify-content: flex-start;
        line-height: 30px;

        label {
          color: #222;
          margin-right: 15px;
          display: inline-block;
          width: 60px;
          margin-top: 4px;
        }

        div{
          display: flex;
          justify-content: flex-start;
          flex-wrap: wrap;
          align-items: center;
          width: calc(100% - 60px);
          & > span {
            margin: 5px 15px;
            cursor: pointer;
            white-space: nowrap;
            padding: 0 5px;
            border-radius: 3px;
            &.active{
              background: #40a9ff;
              color: #fff;
            }

            &:hover {
              opacity: 0.7;
            }
          }
        }

      }
    }
  }
</style>
